🛩️Tutorial-05

Forms in HTML :

The First Principle: The Web Needs to Be a Two-Way Street

The fundamental truth is that a website isn't just a brochure for you to read. For the web to be useful, it needs a way to collect information from the user and send it back to the server.

Without this, you couldn't log in, search for a video, buy a product, post a comment, or send a message. The web would be a read-only library.

The Core Problem

How do we create a standardized, reliable system to:

1. Display interactive fields for a user to fill in (text boxes, checkboxes, dropdowns).
2. Package the user's data neatly.
3. Send that package to a specific destination on a server.
4. Tell the server how the data is being sent.

The logical solution to this entire problem is the HTML <form>.

The <input> Element: The Box for Your Stuff

This is the most common form tag. It's a self-closing tag that creates an input field. Its behavior changes based on its type attribute.

The most basic type is text:

<input type="text">

<form>
    <input type="text">
</form>

The Need for Meaning - The <label>

The Problem: We have a box, but the user has no idea what they are supposed to type into it. Is it for a name? An email? A search query? The box is meaningless without a description.

The Solution: We need to add a descriptive piece of text. The correct HTML tag for this is the <label>.

<label>First Name:</label>
<input type="text">

The Need for Connection - id and for

We connect the label and input using id and for:

<label for="firstName">First Name:</label>
<input type="text" id="firstName">

The Need for Submission - The <form> and submit

<form>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName">

    <br><br>

    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName">

    <br><br>

    <input type="submit">
</form>

The Need for Data Identification - The name Attribute

<form>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName">

    <br><br>

    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName">

    <br><br>

    <input type="submit">
</form>

The Need for "Select One" - Radio Buttons

<label>T-Shirt Size:</label><br>

<input type="radio" id="sizeS" name="shirtSize" value="small">
<label for="sizeS">Small</label><br>

<input type="radio" id="sizeM" name="shirtSize" value="medium">
<label for="sizeM">Medium</label><br>

<input type="radio" id="sizeL" name="shirtSize" value="large">
<label for="sizeL">Large</label><br><br>

The Need for "Select Many" - Checkboxes

<label>Pizza Toppings:</label><br>

<input type="checkbox" id="toppingPep" name="toppings" value="pepperoni">
<label for="toppingPep">Pepperoni</label><br>

<input type="checkbox" id="toppingMush" name="toppings" value="mushrooms">
<label for="toppingMush">Mushrooms</label><br>

<input type="checkbox" id="toppingOni" name="toppings" value="onions">
<label for="toppingOni">Onions</label><br><br>

A Better Button - The <button> Element

<button type="submit">
    <strong>Submit</strong> Your Order
</button>

The Need for Long-Form Text - <textarea>

<label for="comments">Any special instructions?</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

The Need for Many Options - The Dropdown (<select>)

<label for="country">Country:</label><br>
<select id="country" name="country">
    <option value="">--Please choose an option--</option>
    <option value="in">India</option>
    <option value="us">USA</option>
    <option value="uk">United Kingdom</option>
    <option value="au">Australia</option>
</select><br><br>

Specialized Inputs (HTML5)

<label for="userPass">Password:</label><br>
<input type="password" id="userPass" name="userPassword"><br><br>

<label for="userAge">Age (18-99):</label><br>
<input type="number" id="userAge" name="age" min="18" max="99"><br><br>

<label for="birthDate">Date of Birth:</label><br>
<input type="date" id="birthDate" name="dob"><br><br>